<template>
  <com-el-dialog-ex
    title="编辑样例"
    v-model:visible="visible"
    @open="resetForm"
    @confirm="submitForm"
    @cancel="closed"
  >
    <el-form ref="ruleFormRef" label-width="auto" size="default" :model="ruleForm" :rules="rules">
      <el-form-item label="文本框：" prop="input">
        <el-input v-model="ruleForm.input" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="文本域：" prop="textarea">
        <el-input v-model="ruleForm.textarea" type="textarea" :rows="4" placeholder="请输入内容" />
      </el-form-item>
      <el-form-item label="数字框：" prop="number">
        <el-input-number
          v-model="ruleForm.number"
          placeholder="请输入数字"
          controls-position="right"
        />
      </el-form-item>
      <el-form-item label="下拉框：" prop="comboBox">
        <el-select placeholder="请选择" clearable v-model="ruleForm.comboBox">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="级联选择：" prop="cascader">
        <el-cascader
          v-model="ruleForm.cascader"
          style="width: 100%"
          placeholder="请选择"
          :options="cascaderOptions"
        />
      </el-form-item>
      <el-form-item label="单选框：" prop="radio">
        <el-radio-group v-model="ruleForm.radio">
          <el-radio value="0">选项01</el-radio>
          <el-radio value="1">选项02</el-radio>
          <el-radio value="2">选项03</el-radio>
        </el-radio-group>
        <el-radio-group v-model="ruleForm.radio">
          <el-radio-button value="0">选项01</el-radio-button>
          <el-radio-button value="1">选项02</el-radio-button>
          <el-radio-button value="2">选项03</el-radio-button>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="复选框：" prop="checkBox">
        <el-radio-group v-model="ruleForm.checkBox">
          <el-checkbox value="0">选项01</el-checkbox>
          <el-checkbox value="1">选项02</el-checkbox>
          <el-checkbox value="2">选项03</el-checkbox>
          <el-checkbox value="3">选项04</el-checkbox>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="开关：" prop="switch">
        <el-switch v-model="ruleForm.switch" />
      </el-form-item>
      <el-form-item label="日期：" prop="date">
        <el-date-picker type="date" placeholder="选择日期" v-model="ruleForm.date" />
      </el-form-item>
      <el-form-item label="时间：" prop="dateTime">
        <el-date-picker type="datetime" placeholder="选择时间" v-model="ruleForm.dateTime" />
      </el-form-item>
    </el-form>
  </com-el-dialog-ex>
</template>

<script setup lang="ts">
import { getCurrentInstance } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { defaultDemoForm, type DemoForm, demoFormRule } from '@/common/model/demo/demoForm'
import ComElDialogEx from '@/components/com-el-dialog-ex/com-el-dialog-ex.vue'

defineOptions({
  name: 'view-demo-edit',
})

//region # 属性

// 应用实例
const { proxy }: any = getCurrentInstance()

// 显示状态
const visible = defineModel('visible', {
  type: Boolean,
  required: true,
  default: false,
})

// 表单
const ruleFormRef = ref<FormInstance>()

// 验证表单
let ruleForm = reactive<DemoForm>(defaultDemoForm)

// 验证规则
const rules = reactive<FormRules<DemoForm>>(demoFormRule)

// 选项列表
const options = [
  {
    value: 'Item01',
    label: '选项01',
  },
  {
    value: 'Item02',
    label: '选项02',
  },
]

// 级联选项列表
const cascaderOptions = [
  {
    value: 'level01',
    label: '层级01',
    children: [
      {
        value: 'level0101',
        label: '层级01-01',
        children: [
          {
            value: 'level010101',
            label: '层级01-01-01',
          },
          {
            value: 'level010102',
            label: '层级01-01-02',
          },
        ],
      },
      {
        value: 'level0201',
        label: '层级01-02',
        children: [
          {
            value: 'level010201',
            label: '层级01-02-01',
          },
          {
            value: 'level010202',
            label: '层级01-02-02',
          },
        ],
      },
    ],
  },
  {
    value: 'level02',
    label: '层级02',
    children: [
      {
        value: 'level0201',
        label: '层级02-01',
        children: [
          {
            value: 'level020101',
            label: '层级02-01-01',
          },
          {
            value: 'level020102',
            label: '层级02-01-02',
          },
        ],
      },
      {
        value: 'level0201',
        label: '层级02-02',
        children: [
          {
            value: 'level020201',
            label: '层级02-02-01',
          },
          {
            value: 'level020202',
            label: '层级02-02-02',
          },
        ],
      },
    ],
  },
]

// 组件事件列表
const emits = defineEmits(['closed'])

//endregion

//region # Hooks

//endregion

//region # 方法

// Action

/**
 * 提交
 * */
const submitForm = async () => {
  if (!ruleFormRef.value) return
  await ruleFormRef.value.validate((valid, fields) => {
    console.log('2333', valid, fields)
    if (valid) {
      // TODO 提交
      proxy.$service.toast.success('表单验证通过！')

      tryClose(true)
    } else {
      // TODO 验证未通过
      proxy.$service.toast.error('表单验证未通过！')
    }
  })
}

/**
 * 重置表单
 * */
const resetForm = () => {
  if (!ruleFormRef.value) return

  ruleForm = Object.assign(ruleForm, defaultDemoForm)
  ruleFormRef.value.resetFields()
}

/**
 * 重置表单
 * */
const closed = () => {
  tryClose(false)
}

/**
 * 尝试关闭
 * @param result - 结果
 * */
const tryClose = (result: boolean) => {
  visible.value = false
  emits('closed', result)
}

//endregion

//region # 事件

/**
 * 加载完毕
 * */
onMounted(async () => {})
//endregion
</script>

<style scoped>
@import 'DemoEditView.less';
</style>
